<script setup lang="ts">
import CountUp from 'vue-countup-v3';
import { getCasesListByTypeIdServer,  getCasesTypeListServer} from "@/api/cases";
import {getUrlParams} from "@/utils";
import seo from "@/utils/seo";
import {getSeoInfoServer, getWebBanner} from "@/api/common";

const currentCon = ref('');
const a = ref(1);
const casesList = ref([])
const casesActive = ref([])
const casesActiveValue = ref('1')
const caseTableList = ref([])
const showCount = ref(true)
const pageInfo = reactive({
  total:0,
  pageSize:9,
  pageNum:1
})
const query = reactive({
  typeId:''
})
const seoInfo = ref({...seo,title:'政府行业案例_加密软件_数据防泄漏_华途信息'})
const getSeo = async ()=>{
  const {data} =await getSeoInfoServer("/cases")
  seoInfo.value = {...data}
}
getSeo()
const BannerInfo = ref({
  imageOrVideo: '',
  intro: '',
  title: '',
  caseIntroList: '',
})
const getBanner = async () => {
  const {data} = await getWebBanner(8)
  if (data) {
    BannerInfo.value = data
  }
}
const getCasesType = async ()=>{
  const {data} = await getCasesTypeListServer()
  casesList.value = data
  casesActive.value = data[0]['caseTypeList']
  if(casesActive.value&&casesActive.value.length){

    let type = getUrlParams('type')
    if(type){
      currentCon.value =type
      query.typeId =type
      setTimeout(()=>{
        scrollTo()
      },100)
    }else{
      currentCon.value = casesActive.value[0].id
      query.typeId =casesActive.value[0].id
    }
    getCasesList()
  }
}
getCasesType()
getBanner()

const scrollTo = ()=>{
  let demos = document.querySelector('.ht-cases-list-title') as HTMLElement
  document.documentElement.style.scrollBehavior = 'smooth';
  window.scrollTo(0,demos.getBoundingClientRect().y)
}
const switchTab = (val: string)=>{
  casesActiveValue.value = val
  casesActive.value = (val==='1'?casesList.value[0]['caseTypeList']:casesList.value[1]['caseTypeList'])
  if(casesActive.value&&casesActive.value.length){
    currentCon.value = casesActive.value[0].id
    query.typeId = casesActive.value[0].id
    getCasesList()
  }else{
    caseTableList.value = []
    pageInfo.total = 0
  }
}

// 表格
const getCasesList = async ()=>{
  let params = {...pageInfo,typeId:query.typeId}
  const {data} = await getCasesListByTypeIdServer(params)
  // if(data.rows.length){
    caseTableList.value = data.rows
    pageInfo.total = data.total
  // }
}
const filterConResClickHandle = (val: { id: string; }) => {
  currentCon.value = val.id;
  query.typeId = val.id;
  getCasesList()
};
const handleScroll = () => {
  let targetElement: HTMLElement = document.querySelector('.ht-cases-top-show')!;
  if (isElementInViewport(targetElement)) {
    showCount.value = true;
  } else {
    showCount.value = false
  }
};
onActivated(()=>{
  // handleScroll()
  window.addEventListener('scroll',handleScroll)
})
onDeactivated(()=>{
  window.removeEventListener('scroll',handleScroll)
})
</script>
<template>
  <div class="ht-cases">
    <Head>
      <Title>{{ seoInfo.title}}</Title>
      <Meta name="description" :content="seoInfo.description"/>
      <Meta name="keywords" :content="seoInfo.keyword"/>
    </Head>
    <div class="ht-cases-top">
      <div class="banner-container">
        <BannerMedia  :url="BannerInfo.imageOrVideo"/>
      </div>
      <div class="ht-cases-top-title">{{BannerInfo.title}}</div>
      <div class="ht-cases-top-subtitle">{{BannerInfo.intro}}</div>
      <div class="ht-cases-top-show">

        <Swiper v-if="BannerInfo&&BannerInfo.caseIntroList&&BannerInfo.caseIntroList.length>5" :slides-per-view="5"

        >
          <SwiperSlide v-for="item in BannerInfo.caseIntroList">
            <div class="ht-cases-top-show-item">
              <div class="line1">
                <count-up v-if="showCount" :end-val="item['figure']" :options="{ useGrouping: false }" />
                <span>{{item['symbol']||'+'}}</span>
              </div>
              <div class="line2">{{item['title']}}</div>
            </div>
          </SwiperSlide>
        </Swiper>
        <template v-else>
          <div class="ht-cases-top-show-item" v-for="item in BannerInfo.caseIntroList">
            <div class="line1">
              <count-up v-if="showCount" :end-val="item['figure']" :options="{ useGrouping: false }" />
              <span>{{item['symbol']||'+'}}</span>
            </div>
            <div class="line2">{{item['title']}}</div>
          </div>
        </template>
      </div>
    </div>
    <div class="ht-cases-list">
      <div class="ht-cases-list-title">案例中心</div>
      <div class="ht-cases-list-filter">
        <div class="describe">
          华途始终着秉承诚信、勤奋、创新、激情的企业文化，为更多客户提供优质的信息安全服务，为促进中华民族的信息安全产业发
          展将始终着秉承诚信、勤奋、创新、激情的企业文化，为更多客户提供优质的信息安全服务，为促进中华民族的信息安全产业发展将始终着秉承诚信、勤奋、创新、激情的企业文化，为更多客户提供优质的信息安全服务，为各行业数据安全保驾护航！
        </div>
        <div class="by-industry" :class="casesActiveValue==='1'?'active':''" @click="switchTab('1')">
          <img class="selected" src="~/assets/images/cases/i-active.png" alt="" />
          <img class="unselect" src="~/assets/images/cases/i.png" alt="" />
          <div class="txt">行业筛选</div>
        </div>
        <div class="by-product" :class="casesActiveValue==='2'?'active':''"   @click="switchTab('2')">
          <img class="selected" src="~/assets/images/cases/p-active.png" alt="" />
          <img class="unselect" src="~/assets/images/cases/p.png" alt="" />
          <div class="txt">产品筛选</div>
        </div>
      </div>
      <div class="ht-cases-list-conRes" v-if="casesActive">
            <div
                v-for="(item, index) in casesActive"
                class="conRes-item"
                :class="currentCon === item.id ? 'active' : ''"
                @click="filterConResClickHandle(item)"
            >
              {{ item.typeName }}
            </div>
      </div>
      <div class="ht-cases-list-card">
        <NuxtLink :to="`/cases/${item.id}`" class="ht-cases-list-card-item" v-for="item in caseTableList">
          <img class="bg" :src="item['coverImage']" />
          <div class="logo">
            <img :src="item['logo']" />
          </div>
          <div class="company-name">{{item.title}}</div>
          <div class="company-desc">
            {{item['intro']}}
          </div>
        </NuxtLink>
      </div>
    </div>
    <div class="page-box">
      <Pagination v-model:page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total" @pagination="getCasesList" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ht-cases {
  &-top {
    width: 24rem;
    height: 8.75rem;
    padding-top: 0.1px;
    //background: url(~/assets/images/cases/head-bg.jpg) no-repeat;
    //background-size: 24rem 8.75rem;
    color: #ffffff;
    position: relative;
    .banner-container {
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    &-title {
      text-align: center;
      margin-top: 3.97rem;
      font-size: 0.7rem;
      font-weight: bold;
    }

    &-subtitle {
      text-align: center;
      margin-top: 0.09rem;
      font-size: 0.33rem;
      font-weight: 400;
    }

    &-show {
      width: 23rem;
      display: flex;
      justify-content: center;
      margin: auto;
      margin-top: 0.53rem;

      &-item {
        width: 4.4rem;
        height: 1.64rem;
        border-radius: 0.13rem;
        backdrop-filter: blur(0.5rem);
        text-align: center;
        color: #fff;
        margin-right: 0.31rem;
        border: 0.01rem solid #fff;

        &:last-child {
          margin-right: 0;
        }

        .line1 {
          margin-top: 0.23rem;
          font-size: 0.63rem;
          font-weight: bolder;
        }

        .line2 {
          font-size: 0.25rem;
          font-weight: 500;
        }
      }
    }
  }

  &-list {
    padding: 1.45rem 0;
    padding-left: 1.35rem;

    &-title {
      font-size: 0.57rem;
      font-weight: bold;
      margin-top: 0.43rem;
      margin-bottom: 0.68rem;
    }

    &-filter {
      height: 1.5rem;
      display: flex;
      border-bottom: 0.01rem solid #d4d4d4;

      .describe {
        width: 16.4rem;
        font-size: 0.23rem;
        font-weight: 500;
        color: #666666;
        margin-right: 1.1rem;
        padding-top: 0.2rem;
      }

      .by-industry,
      .by-product {
        cursor: pointer;
        text-align: center;
        color: #999;
        padding: 0 0.15rem;
        position: relative;
        font-size: 0.28rem;

        .txt {
          margin-top: 0.1rem;
        }

        img {
          margin-top: 0.1rem;
          width: 0.4125rem;
          height: 0.4rem;

          &.selected {
            display: none;
          }

          &.unselect {
            display: inline-block;
          }
        }

        &.active {
          color: #3ab5ec;

          &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 0.06rem;
            background-color: #3ab5ec;
            bottom: -0.045rem;
            left: 0;
          }

          img {
            &.selected {
              display: inline-block;
            }

            &.unselect {
              display: none;
            }
          }
        }
      }

      .by-product {
        margin-left: 0.75rem;
      }
    }

    &-conRes {
      width: 21.2rem;
      margin-bottom: 1rem;
      padding-bottom: 0.1rem;
      overflow-y: hidden;
      display: flex;
      overflow-x: auto;
      /* 添加自定义的滚动条样式 */
      &::-webkit-scrollbar {
        height: 0.12rem; /* 设置滚动条的宽度 */
      }

      &::-webkit-scrollbar-track {
        background-color: #f5f5f5; /* 设置背景色 */
      }

      &::-webkit-scrollbar-thumb {
        background-color: #bbb; /* 设置拖动按钮的背景色 */
        border-radius: 0.2rem; /* 设置边角为圆形 */
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #999; /* 当鼠标悬停时改变背景色 */
      }

      .conRes-item {
        height: 0.7rem;
        display: inline-block;
        padding: 0.18rem 0.354rem;
        cursor: pointer;
        color: #999;
        border-radius: 0.35rem;
        margin-top: 0.68rem;
        font-size: 0.25rem;
        text-align: center;
        transition: 0.3s;
        margin-right:5px;
        flex-shrink: 0;
        &.active {
          color: #fff;
          background: linear-gradient(61deg, #47ffda 0%, #2e6aff 100%);
        }
      }
    }
  }

  &-list-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    &-item {
      width: 6.9rem;
      height: 6.45rem;
      background: #ffffff;
      border-radius: 0.13rem 0.13rem 0.13rem 0.13rem;
      border: 0.01rem solid #c5d7ff;
      position: relative;
      margin-right: 0.25rem;
      margin-bottom: 0.5rem;
      &:hover {
        box-shadow: 0rem 0.08rem 0.43rem 0.01rem rgba(46, 106, 255, 0.1);
        .company-name {
          color: #004ade;
        }
      }

      &:nth-child(3n) {
        margin-right: 0;
      }

      .bg {
        width: 6.9rem;
        height: 4.09rem;
        background: #646464;
        border-radius: 0.13rem 0.13rem 0rem 0rem;
      }

      .logo {
        position: absolute;
        width: 2.03rem;
        height: 2.03rem;
        background: #ffffff;
        box-shadow: 0rem 0.04rem 0.15rem 0.01rem rgba(46, 106, 255, 0.11);
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0.41rem;
        top: 2.89rem;

        img {
          max-width: 1.39rem;
          max-height: 0.89rem;
          object-fit: contain;
        }
      }

      .company-name {
        font-size: 0.25rem;
        font-weight: bold;
        color: #111111;
        margin-left: 0.43rem;
        margin-top: 0.54rem;
        margin-bottom: 0.26rem;
      }

      .company-desc {
        font-size: 0.18rem;
        font-weight: 400;
        color: #666666;
        line-height: 0.35rem;
        padding: 0 0.43rem;
        height: 0.7rem;
        overflow-y: scroll;
        &::-webkit-scrollbar{
          display: none;
        }

      }
    }
  }
  .page-box {
    text-align: center;
    margin-bottom: 1.45rem;
  }
}
</style>
